// 面向对象的思想实现Tab栏切换
/**
 * Tab栏切换的功能:
 * 切换功能
 * 添加功能
 * 删除功能
 * 修改功能
 * 
 *  */

var that;

class Tab {

  // 建议: 构造函数中只做赋值操作(给对象加属性), 其他的初始化操作建议放到其他方法中
  constructor(id) {
    that = this
    // 初始化操作 (获取元素 + 绑定事件)
    this.tab = document.querySelector(id)

    // 添加功能 1. 找到加号按钮 并绑定事件
    this.addBtn = this.tab.querySelector('.tabadd')

    // 找到装标签页的ul
    this.ul = this.tab.querySelector('.firstnav > ul')

    // 找到装section的盒子
    this.tabScon = this.tab.querySelector('.tabscon')

    // console.log(this.tab)
    // console.log(this.lis)
    // console.log(this.sections)
    this.init()
  }

  init() {
    this.lis = this.tab.querySelectorAll('.firstnav li')
    this.sections = this.tab.querySelectorAll('.tabscon section')
    // 找到所有的关闭按钮
    this.deletes = this.tab.querySelectorAll('.icon-guanbi')

    this.addBtn.onclick = this.addTab

    for (var i = 0; i < this.lis.length; i++) {
      // var li = this.lis[i]
      this.lis[i].index = i
      // li.onclick = function() {
      //   // console.log('我被点了', this.index) // this -> li

      // }

      this.lis[i].onclick = this.toggleTab

      this.deletes[i].onclick = this.deleteTab

      // 给 span 绑定事件
      this.lis[i].children[0].ondblclick = this.editTab
      this.sections[i].ondblclick = this.editTab
    }
  }

  clearClassName() {
    // that 可以
    // this 可以
    // console.log(this === that)
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }

  toggleTab() {
    // this -> li
    // console.log(this, this.index)
    // li排他
    that.clearClassName()

    this.className = 'liactive'
    // 找到对应的section进行排他
    that.sections[this.index].className = 'conactive'
  }

  addTab() {
    // this -> addBtn
    // 排他
    that.clearClassName()

    var random = Math.random() * 100
    console.log(random)
    // 生成标签页并加入 ul
    var li = `<li class="liactive"><span>测试1${random.toFixed(2)}</span><span class="iconfont icon-guanbi"></span></li>`
    that.ul.insertAdjacentHTML('beforeend', li)

    // 生成 section 并加入 tabscon
    var section = `<section class="conactive">测试1${random}</section>`
    that.tabScon.insertAdjacentHTML('beforeend', section)

    that.init()
  }

  deleteTab(e) {
    // this -> 关闭按钮
    // 阻止冒泡
    e.stopPropagation()

    // 获取索引
    // console.log('我被点了', this.parentNode.index)
    var index = this.parentNode.index
    that.lis[index].remove()
    that.sections[index].remove()
    that.init()

    // 当前的 li 是否有 liactive 类, 如果有才执行后面的代码
    if (!this.parentNode.className.includes('liactive')) return

    index--

    // if (!that.lis[index]) {
    //   index += 2
    //   that.lis[index].click()
    // } else {
    //   that.lis[index].click()
    // }

    if (!that.lis[index]) index++

    that.lis[index] && that.lis[index].click()
  }

  editTab() {
    // this -> span
    // console.log('我被双击了')
    // 1. 创建一个 input 替换到 span 内容中
    // 2. 当前 span 的内容设置到新的 input 中
    // console.log(this.innerHTML)
    // 高级
    this.innerHTML = `<input type='text' value='${this.innerHTML}' />`
    // 3. 让 input 内容默认选中
    this.children[0].select()
    // 4. 当文本框失去焦点时, 将用户输入的内容设置给 span
    this.children[0].onblur = function() {
      // this -> input
      // console.log(this.value)
      this.parentNode.innerHTML = this.value
    }
    // 5. 绑定键盘按下事件
    this.children[0].onkeydown = function(e) {
      if (e.keyCode === 13) this.blur()
    }

  } 
}

var t = new Tab('#tab')

// t.init()